<template>
  <div>
    <div
      class="Single"
      v-if="
        category.type == 1 &&
          category.cover.length < 3 &&
          category.cover.length >= 1
      "
      @click="$router.push('/articlescoms/' + category.id)"
    >
      <div class="SingleCont">
        <div class="SingleTitle">{{ category.title }}</div>
        <div class="info" v-if="category.comments">
          {{ category.user.nickname }}
          {{ category.comment_length }}
          {{ category.comments.length }}跟帖
        </div>
        <div class="info" v-else>
          {{ category.user.nickname }}
          {{ category.comment_length }}跟帖
        </div>
      </div>
      <img :src="category.cover[0].url | filImgurl" alt="" />
    </div>
    <div
      @click="$router.push('/articlescoms/' + category.id)"
      class="Multi"
      v-else-if="category.type == 1 && category.cover.length >= 3"
    >
      <div class="MultiTitle">{{ category.title }}</div>
      <div class="imgs">
        <img :src="category.cover[0].url | filImgurl" alt="" />
        <img :src="category.cover[1].url | filImgurl" alt="" />
        <img :src="category.cover[2].url | filImgurl" alt="" />
      </div>
      <div class="info" v-if="category.comments">
        {{ category.user.nickname }}
        {{ category.comment_length }}
        {{ category.comments.length }}跟帖
      </div>
      <div class="info" v-else>
        {{ category.user.nickname }}
        {{ category.comment_length }}跟帖
      </div>
    </div>
    <div
      class="video"
      v-if="category.type == 2 && category.cover.length >= 1"
      @click="$router.push('/articlescoms/' + category.id)"
    >
      <div class="videoTitle">{{ category.title }}</div>
      <img :src="category.cover[0].url | filImgurl" alt="" />
      <span class="iconfont iconshipin"></span>
      <div class="info" v-if="category.comments">
        {{ category.user.nickname }}
        {{ category.comment_length }}
        {{ category.comments.length }}跟帖
      </div>
      <div class="info" v-else>
        {{ category.user.nickname }}
        {{ category.comment_length }}跟帖
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["category"],
  methods: {
    // toarticles() {
    //   this.$router.push("/articlescoms");
    // }
  }
};
</script>

<style lang="less" scoped>
.Single {
  display: flex;
  padding: 2.778vw 2.778vw;
  border-bottom: 0.278vw solid #e4e4ee;
  .SingleCont {
    font-size: 4.444vw;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .info {
      color: #8888;
      font-size: 3.889vw;
    }
  }
  img {
    width: 31.111vw;
    height: 20.556vw;
    object-fit: cover;
  }
}
.Multi {
  border-bottom: 1px solid #e4e4ee;
  box-sizing: border-box;
  padding: 2.778vw 2.778vw;
  .MultiTitle {
    font-size: 4.444vw;
  }
  .imgs {
    margin: 2.778vw 0;
    display: flex;
    justify-content: space-between;
    img {
      object-fit: cover;
      width: 33.3%;
      height: 20.556vw;
      padding: 0.278vw;
    }
  }
  .info {
    color: #8888;
    font-size: 3.889vw;
  }
}
.video {
  box-sizing: border-box;
  padding: 2.778vw 2.778vw;
  position: relative;
  border-bottom: 1px solid #e4e4e4;
  .videoTitle {
    font-size: 4.444vw;
  }
  img {
    margin: 2.778vw 0;
    width: 94.444vw;
    height: 47.222vw;
    object-fit: cover;
  }
  .iconshipin {
    position: absolute;
    top: 29.167vw;
    left: 47.222vw;
    border-radius: 50%;
    font-size: 12.778vw;
    width: 12.778vw;
    color: #ffffff;
    background: #cccccc;
  }
  .info {
    color: #8888;
    font-size: 3.889vw;
  }
}
</style>